<template>
  <div class="Tisikuan">
    <div class="kuan" :class="toastType">
      <i class="iconfont" :class="$store.state.toasIcon"></i
      ><span>{{ $store.state.toasMsg }}</span>
    </div>
  </div>
</template>
 
<script>
export default {
  data() {
    return {};
  },
  computed: {
    toastType() {
      let type = "success";
      switch (this.$store.state.toasIcon) {
        case "icon-toast-shibai_huaban":
          type = "dander";
          break;
        case "icon-toast-jinggao":
          type = "warning";
          break;
      }
      return type;
    },
  },
};
</script>
 
<style lang = "less" scoped>
.Tisikuan {
  /* position: relative; */
  .kuan {
    padding: 10px 20px 10px 20px;
    background: #fff;
    border-radius: 15px;
    text-align: center;
    line-height: 50px;
    position: fixed;
    left: 45%;
    top: 10%;

    border: 1px #ccc solid;
    .iconfont {
      margin-right: 10px;
    }
    &.success {
      background-color: rgb(50, 252, 90);
      color: rgb(35, 174, 0);
    }
    &.dander {
      background-color: rgb(248, 69, 69);
      color: rgb(201, 17, 17);
    }
    &.warning {
      background-color: #f0ad4e;
      color: rgb(245, 245, 245);
    }
  }
  &.success {
    background-color: rgb(50, 252, 90);
    color: rgb(35, 174, 0);
  }
  &.dander {
    background-color: rgb(248, 69, 69);
    color: rgb(201, 17, 17);
  }
  &.warning {
    background-color: #f0ad4e;
    color: rgb(245, 245, 245);
  }
}
</style>